<template>
	<el-dialog title="多实例配置" :visible.sync="dialogVisible" width="660px" 
			@closed="$emit('close')">
			<el-alert
			  type="info"
			  :closable="false"
			  show-icon
			  style="margin-bottom: 20px"
			>
			  <div slot class='br'>
			    按照BPMN2.0规范的要求，用于为每个实例创建执行的父执行，会提供下列变量:<br/>
			    nrOfInstances：实例总数。<br/>
			    nrOfActiveInstances：当前活动的（即未完成的），实例数量。对于顺序多实例，这个值总为1。<br/>
			    nrOfCompletedInstances：已完成的实例数量。<br/>
			    loopCounter：给定实例在for-each循环中的index。<br/>
			  </div>
			</el-alert>
		<el-row justify="center">
			<el-col :span="18" :offset="3" >
			<el-form ref="formData" :model="formData" label-width="100px">
				<el-form-item >
					<span slot="label">
						集合 
						<el-tooltip class="item" effect="dark" placement="top-start">
							<div slot="content">
								属性会作为表达式进行解析。如果表达式解析为字符串而不是一个集合，<br />
								不论是因为本身配置的就是静态字符串值，还是表达式计算结果为字符串，<br />
								这个字符串都会被当做变量名，并从流程变量中用于获取实际的集合。`
							</div>
							<i class="el-icon-info" style="color:blue;"></i>
						</el-tooltip>
						:
					</span>
					<el-input v-model="formData.collection"></el-input>
				</el-form-item>
				<el-form-item >
					<span slot="label">元素变量
						<el-tooltip class="item" effect="dark" placement="top-start">
							<div slot="content">
								每创建一个用户任务前，先以该元素变量为label，集合中的一项为value，<br />
								创建（局部）流程变量，该局部流程变量被用于指派用户任务。<br />
								一般来说，该字符串应与指定人员变量相同。
							</div>
							<i class="el-icon-info" style="color:blue;"></i>
						</el-tooltip>
						:
					</span>
					<el-input v-model="formData.elementVariable"></el-input>
				</el-form-item>
				<el-form-item label="执行方式 :">
					<el-radio v-model="formData.isSequential" :label="true" >串行</el-radio>
					<el-radio v-model="formData.isSequential" :label="false" >并行</el-radio>
				</el-form-item>
				<el-form-item>
					<span slot="label">完成条件
						<el-tooltip class="item" effect="dark" placement="top-start">
							<div slot="content">
								多实例活动在所有实例都完成时结束，然而也可以指定一个表达式，在每个实例<br />
								结束时进行计算。当表达式计算为true时，将销毁所有剩余的实例，并结束多实例<br />
								活动，继续执行流程。例如 ${nrOfCompletedInstances/nrOfInstances >= 0.6 }，<br />
								表示当任务完成60%时，该节点就算完成
							</div>
							<i class="el-icon-info" style="color:blue;"></i>
						</el-tooltip>
						:
					</span>
					<el-input v-model="formData.completionCondition"></el-input>
				</el-form-item>
			</el-form>
			</el-col>
		</el-row>	
		<span slot="footer" class="dialog-footer">
			<el-button @click="formData = {}">清空</el-button>
			<el-button type="primary" @click="closeDialog">确 定</el-button>
			</span>
	</el-dialog>
</template>

<script>
	import mixinPanel from '../../mixins/mixinPanel.js'
	import { formatJsonKeyValue } from '../../common/parseElement'
export default{
	name:"",
	mixins: [mixinPanel],
	data(){
	  return {
	    dialogVisible: true,
	    formData: {},
	  }
	},
	mounted() {
		const cache = JSON.parse(JSON.stringify(this.element.businessObject.loopCharacteristics ?? {}))
		cache.completionCondition = cache.completionCondition?.body
		cache.isSequential= cache.$type&&cache.isSequential?cache.isSequential:false
		this.formData = formatJsonKeyValue(cache)
		// if(this.formData.$type){
		// 	if(!this.formData.isSequential){
		// 		this.formData.isSequential = false
		// 	}else this.formData.isSequential = true
		// }
	  },
	methods:{
		updateElement() {
		  if (this.formData.isSequential !== null && this.formData.isSequential !== undefined) {
		    let loopCharacteristics = this.element.businessObject.get('loopCharacteristics')
		    if (!loopCharacteristics) {
		      loopCharacteristics = this.bpmnModel.get('moddle').create('bpmn:MultiInstanceLoopCharacteristics')
		    }
		    loopCharacteristics['isSequential'] = this.formData.isSequential
		    loopCharacteristics['collection'] = this.formData.collection
		    loopCharacteristics['elementVariable'] = this.formData.elementVariable
		    if (this.formData.completionCondition) {
		      const completionCondition = this.bpmnModel.get('moddle').create('bpmn:Expression', { body: this.formData.completionCondition })
		      loopCharacteristics['completionCondition'] = completionCondition
		    }
		    this.updateProperties({ loopCharacteristics: loopCharacteristics })
		  } else {
		    // delete this.element.businessObject.loopCharacteristics
			//先置空
			this.updateProperties({
			  loopCharacteristics: null
			});
			this.$delete(this.element.businessObject,"loopCharacteristics")
		  }
		},
		closeDialog(){
			this.updateElement()
			this.dialogVisible = false
		}
	}
	
		 
		
}
</script>

<style lang="scss">
	.br{
		line-height: 23px;
	}
</style>
